<template>
	<view style="padding-bottom: 50rpx;" v-if="infos">
		<view class="head-box box-bg">
			<image :src="getImgUrl(infos.images)" @click="checkImg(infos.images)" class="img" mode="aspectFill"></image>
			<view class="right">
				<view>{{infos.contact}}（{{infos.mobile}}）</view>
				<view>订单号：{{infos.order_number}}</view>
				<view>条码：{{infos.main_code?infos.main_code:'暂未入库'}}</view>
				<view>状态：<text>{{status}}</text></view>
			</view>
		</view>

		<view class="order-rate box-bg">
			<view class="title">
				<image src="/static/xi-hu/icon/03.png" mode="widthFix"></image>
				<view>订单进度</view>
			</view>
			<view class="time-line" v-for="item,index in schedule" :key="index">
				<view :class="['state',index==0?'s-c':'']">{{item.title}}</view>
				<view class="line">
					<view :class="['dot',index==0?'crr-bg':'']"></view>
				</view>
				<view class="content">
					<view>{{item.time}}</view>
					<view class="desc">{{item.msg}}</view>
					<view v-if="item.image" class="img-list">
						<image v-for="img, idx in item.image" :src="getImgUrl(img)" @click="checkImg(img)"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="order-rate box-bg">
			<view class="title">
				<image src="/static/xi-hu/icon/04.png" mode="widthFix"></image>
				<view>取货进度</view>
			</view>
			<view class="time-line" v-for="item,index in logistics" @click="callPhone(item)" :key="index">
				<view class="line">
					<view :class="['dot',index==0?'crr-bg':'']"></view>
				</view>
				<view class="content">
					<view><u-parse :content="item.operationRemark"></u-parse></view>
					<view class="desc">{{item.operationTime}}</view>
				</view>
			</view>
		</view>

		<view class="order-rate box-bg">
			<view class="title">
				<image src="/static/xi-hu/icon/04.png" mode="widthFix"></image>
				<view>发货进度</view>
			</view>
			<view class="time-line" v-for="item,index in back_logistics" @click="callPhone(item)" :key="index">
				<view class="line">
					<view :class="['dot',index==0?'crr-bg':'']"></view>
				</view>
				<view class="content">
					<view><u-parse :content="item.operationRemark"></u-parse></view>
					<view class="desc">{{item.operationTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLogisticsInfo,
	} from "@/api/apis/wash.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				order_id: '',
				tid: '',
				infos: null,
				statusList: ['待付款', '待取货', '待收货', '待评价', '已完成', '瑕疵', '待付款'],
				schedule: [],
				logistics: [],
				back_logistics: [],
				status: ""
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.tid = e.tid
			this.status = this.statusList[e.status]
		},
		onShow() {
			getLogisticsInfo({
				order_id: this.order_id,
				clothing_id: this.tid
			}).then(res => {
				this.infos = res.data.order_info
				if (res.data.schedule)
					this.schedule = res.data.schedule.reverse()
				if (res.data.logistics && res.data.logistics.data && res.data.logistics.data.traceDetails) {
					this.logistics = res.data.logistics.data.traceDetails.map(item => {
						item.operationRemark = item.categoryName + '，' + item.operationRemark
						if (item.operatorPhone) {
							item.operationRemark = item.operationRemark.replace(item.operatorPhone,
								"<text style='color:#00D26E;text-decoration: underline;'>" +
								item.operatorPhone + "</text>");
						}
						return item
					})
				}

				if (res.data.back_logistics && res.data.back_logistics.data && res.data.back_logistics.data
					.traceDetails) {
					this.back_logistics = res.data.back_logistics.data.traceDetails.map(item => {
						item.operationRemark = item.categoryName + '，' + item.operationRemark
						if (item.operatorPhone) {
							item.operationRemark = item.operationRemark.replace(item.operatorPhone,
								"<text style='color:#00D26E;text-decoration: underline;'>" +
								item.operatorPhone + "</text>");
						}
						return item
					})
				}


			})
		},
		methods: {
			callPhone(item) {
				if (item.operatorPhone) {
					uni.makePhoneCall({
						phoneNumber: item.operatorPhone + ""
					})
				}
			},
			//地址
			getImgUrl(url) {
				return setImgUrl(url);
			},
			checkImg(url) {
				let img = setImgUrl(url);
				uni.previewImage({
					urls: [img]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-line {
		display: flex;
		font-size: 28rpx;
		color: #333333;


		.state {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.s-c {
			color: #00D26E;
		}

		.content {
			padding: 15rpx 0;
			flex: 1;
		}

		.desc {
			font-size: 24rpx;
			color: #999999;

		}

		.img-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 100rpx;
				height: 100rpx;
				background: rgba(255, 255, 255, 0.39);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx;
				margin-right: 10rpx;
			}
		}

		.line {
			width: 6rpx;
			background: #F5F5F5;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx 0 18rpx;

			.dot {
				width: 18rpx;
				height: 18rpx;
				background: #CCCCCC;
				border-radius: 50%;
				flex-shrink: 0
			}

			.crr-bg {
				background: #00D26E;
			}
		}


	}

	.box-bg {
		margin: 0 32rpx 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
	}

	.order-rate {
		padding: 32rpx 24rpx;
		font-size: 28rpx;
		color: #333333;

		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 15rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 18rpx;
			}
		}
	}

	.head-box {
		padding: 36rpx 32rpx;
		font-size: 28rpx;
		color: #333333;
		display: flex;

		.img {
			width: 160rpx;
			height: 160rpx;
			background: rgba(255, 255, 255, 0.39);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx;
			margin-right: 24rpx;
		}

		.right {
			flex: 1;

			view {
				margin-bottom: 12rpx;

				text {
					color: #00D26E;
				}
			}
		}
	}
</style>